<template>
    <div class="person">
        姓：<input type="text" v-model="firstName"> <br>
        名：<input type="text" v-model="lastName"> <br>
        <button @click="changeFullName">将全名改为li-si</button>
        <br>
        <!--计算属性使用的时候直接写名字，方法调用要加括号-->
        全名-计算属性：<span>{{ fullName }}</span> <br>
        全名-计算属性：<span>{{ fullName }}</span> <br>
        全名-计算属性：<span>{{ fullName }}</span> <br>
        全名-方法调用：<span>{{ fullName2() }}</span> <br>
        全名-方法调用：<span>{{ fullName2() }}</span> <br>
        全名-方法调用：<span>{{ fullName2() }}</span> <br>
    </div>
</template>

<script setup name="Person">
    import {ref, computed} from 'vue'

    let firstName = ref('zhang')
    let lastName = ref('san')

    //普通方法调用没有缓存，计算属性有缓存
    function fullName2() {
        console.log(2)
        return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    }

    // fullName是一个计算属性，且是只读的，不能修改
    /* let fullName = computed(()=>{
      console.log(1)
      return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    }) */

    // fullName是一个计算属性，可读可写
    let fullName = computed({
        // 当fullName被读取时，get调用
        get() {
            console.log(1)
            return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
        },
        // 当fullName被修改时，set调用，且会收到修改的值
        set(val) {
            //数组也能结构赋值
            const [str1, str2] = val.split('-')
            firstName.value = str1
            lastName.value = str2
        }
    })

    function changeFullName() {
        //计算属性也是ref定义的响应式数据
        fullName.value = 'li-si'
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }

    li {
        font-size: 20px;
    }
</style>